<template>
  <uv-popup
    ref="popup"
    mode="bottom"
    round
    z-index="99999"
    :close-on-click-overlay="false"
  >
    <view class="ft-24 px-48rpx">
      <view class="pt-50rpx ft-34">{{ $CONFIG.appName }}隐私保护提示</view>
      <view class="mt-50rpx text-color-666"
        >感谢您使用{{ $CONFIG.appName }}，您使用{{
          $CONFIG.appName
        }}前应当阅读并同意</view
      >
      <view
        class="text-color-666 my-18rpx text-color-base"
        @click="openPrivacyContract"
        >{{ privacyContractName }}</view
      >
      <view class="text-color-666">
        当您点击同意并开始使用产品服务时，即表示你已理解并同意该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法进入{{
          $CONFIG.appName
        }}。
      </view>
      <view class="df-cc mt-40rpx">
        <view class="cancel-btn df-cc mr-30rpx" @click="handleDisagree"
          >不同意</view
        >
        <button
          class="sun-reset-button df-cc btn"
          open-type="agreePrivacyAuthorization"
          @agreeprivacyauthorization="handleAgreePrivacyAuthorization"
        >
          我同意
        </button>
      </view>
      <view style="height: 50rpx"></view>
    </view>
  </uv-popup>
</template>

<script>
export default {
  name: 'k-privacy-popup',
  props: {
    immediate: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      showPopup: false,
      privacyContractName: '',
    };
  },
  created() {
    if (this.immediate) {
      this.$nextTick(() => {
        this.show();
      });
    }
  },
  watch: {
    showPopup() {
      if (this.showPopup) {
        this.$refs.popup.open();
      } else {
        this.$refs.popup.close();
      }
    },
  },
  methods: {
    show() {
      // #ifdef  MP-WEIXIN
      if (!wx.getPrivacySetting) {
        return this.handleAgreePrivacyAuthorization();
      }
      wx.getPrivacySetting({
        success: (res) => {
          console.log(res); // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
          if (res.needAuthorization) {
            // 需要弹出隐私协议
            this.showPopup = true;
            this.privacyContractName = res.privacyContractName;
          } else {
            // 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用已声明过的隐私接口
            this.handleAgreePrivacyAuthorization();
          }
        },
        fail: () => {},
        complete: () => {},
      });
      return;
      // #endif
      this.handleAgreePrivacyAuthorization();
    },
    handleAgreePrivacyAuthorization() {
      this.showPopup = false;
      this.$emit('agree');
    },
    async handleDisagree() {
      const res = await uni.showModal({
        title: '温馨提示',
        content: '您即将拒绝用户隐私协议，无法使用相关功能，是否继续？',
      });
      if (res.cancel) return;
      this.showPopup = false;
      this.$emit('disagree');
    },
    // 打开隐私协议
    openPrivacyContract() {
      // #ifdef  MP-WEIXIN
      wx.openPrivacyContract({
        success: (res) => {
          console.log('openPrivacyContract success');
        },
        fail: (res) => {
          console.error('openPrivacyContract fail', res);
        },
      });
      // #endif
    },
  },
};
</script>

<style scoped lang="scss">
.btn {
  width: 278rpx;
  height: 70rpx;
  background: #4ac1fe;
  border-radius: 35rpx;
  font-size: 30rpx;
  color: #fff;
  font-weight: bold;
}
.cancel-btn {
  width: 278rpx;
  height: 70rpx;
  background: #f2f3f6;
  border-radius: 35rpx;
  font-size: 30rpx;
  font-weight: bold;
}
</style>
